import { PureComponent } from 'react';
import {
    Modal,
    Table,
    Transfer, 
    Switch, 
} from 'antd';

import difference from 'lodash/difference';

const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
  <Transfer {...restProps} showSelectAll={false}>
    {({
      direction,
      filteredItems,
      onItemSelectAll,
      onItemSelect,
      selectedKeys: listSelectedKeys,
      disabled: listDisabled,
    }) => {
      const columns = direction === 'left' ? leftColumns : rightColumns;

      const rowSelection = {
        getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, listSelectedKeys)
            : difference(listSelectedKeys, treeSelectedKeys);
          onItemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          onItemSelect(key, selected);
        },
        selectedRowKeys: listSelectedKeys,
      };

      return (
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={filteredItems}
          size="small"
          style={{ pointerEvents: listDisabled ? 'none' : null }}
          onRow={({ key, disabled: itemDisabled }) => ({
            onClick: () => {
              if (itemDisabled || listDisabled) return;
              onItemSelect(key, !listSelectedKeys.includes(key));
            },
          })}
        />
      );
    }}
  </Transfer>
);

class UserGroupModel extends PureComponent {
  state = {
    targetKeys: [],
    disabled: false,
    showSearch: false,
    userData: []
  };
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    if (undefined != nextProps.userChild && nextProps.userChild.list !== this.props.userChild.list) {
      this.setState({ userData: nextProps.userChild.list });
    }

    if (undefined != nextProps.userSelect && nextProps.userSelect.list !== this.props.userSelect.list) {
      this.setState({ targetKeys: nextProps.userSelect.list });
    }
  }

  leftTableColumns = [{
      title: '用户名',
      dataIndex: 'user_name',
    },
    {
      title: '用户名称',
      dataIndex: 'user_name_cn',
    },
    {
      title: '机构代码',
      dataIndex: 'org_code',
    },
    {
      title: '部门代码',
      dataIndex: 'dept_code',
    },
  ];

  rightTableColumns = [{
      title: '用户名',
      dataIndex: 'user_name',
    },
    {
      title: '用户名称',
      dataIndex: 'user_name_cn',
    },
    {
      title: '机构代码',
      dataIndex: 'org_code',
    },
    {
      title: '部门代码',
      dataIndex: 'dept_code',
    },
  ];

  onChange = nextTargetKeys => {
    this.setState({ targetKeys: nextTargetKeys });
  };

  triggerDisable = disabled => {
    this.setState({ disabled });
  };

  triggerShowSearch = showSearch => {
    this.setState({ showSearch });
  };
  render() {
    const { userGroupVisible, handleUserGroupVisible, handleUserGroupConnect } = this.props;
    const { targetKeys, disabled, showSearch, userData } = this.state;
    return (
      <Modal
      width={1000}
      destroyOnClose
      title="用户组授权"
      visible={userGroupVisible}
      onOk={() => handleUserGroupConnect(targetKeys)}
      onCancel={() => handleUserGroupVisible()}
      >
    
          <div>
            <TableTransfer
              titles={['未授权', '已授权']}
              dataSource={userData}
              targetKeys={targetKeys}
              disabled={disabled}
              showSearch={showSearch}
              filterOption={(inputValue, item) => 
                item.user_name.indexOf(inputValue) > -1
              }
              onChange={this.onChange}
              leftColumns={this.leftTableColumns}
              rightColumns={this.rightTableColumns}
            />
            <Switch
              unCheckedChildren="disabled"
              checkedChildren="disabled"
              checked={disabled}
              onChange={this.triggerDisable}
              style={{ marginTop: 16 }}
            />
            <Switch
              unCheckedChildren="showSearch"
              checkedChildren="showSearch"
              checked={showSearch}
              onChange={this.triggerShowSearch}
              style={{ marginTop: 16 }}
            />
          </div>
    
      </Modal>
    )
  }
}

export default UserGroupModel;